<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style>
        body,ul {margin: 0;padding: 0;list-style: none;}
        body {background: #2d2d2d;font-family: Microsoft Yahei;}
        .loop{background: #fff;height: 90px;overflow: hidden;text-align: center;margin: 200px 20px 0;}
        .loop ul li {height: 30px;line-height: 30px;color: #999;font-size: 12px;transition:all .3s;}
        .loop ul .current {color: #333;font-size: 20px;}
    </style>
</head>
<body>
   
    <div class="loop"></div>
    
</body>
<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
<script>
$(function(){
	$('.loop').loop({
		interval:1000
	});
})
</script>

<script>
(function($){
	$.fn.loop = function(options){
		var defaults = {//默认参数
			interval:3000//间隔时间
		}
		var option = $.extend({},defaults,options);
		var array = [
			{
				name:'item1',
				url:'http://www.baidu.com'
			},{
				name:'item2',
				url:'http://www.baidu.com'
			},
			{
				name:'item3',
				url:'http://www.baidu.com'
			},{
				name:'item4',
				url:'http://www.baidu.com'
			},{
				name:'item5',
				url:'http://www.baidu.com'
			}
		];
		//当数组位数大于3，补充数组
		if(array.length > 3){
			for(i=0;i<3;i++){
				array.push(array[i]);
			}
			let moveUp = setInterval(move,option.interval);
		}
		
		var len = array.length;
		var ul = document.createElement("ul");
		this.each(function(){
        	//console.log(this);//此处this指的是dom元素,即要遍历的每一个dom元素。
			this.appendChild(ul);
    	});
		//输出结构
		for(l=0;l<len;l++){
			ul.innerHTML += "<li><a href="+ array[l].url +">"+array[l].name+"</a></li>"
		}
		var loopLi = ul.getElementsByTagName("li");
		loopLi[1].className = "current";
		//获取第一个li的高度
		var h = loopLi[0].offsetHeight;
		var i = 0;
		function move(){
			i++;
			ul.style.transition = "all .3s";
			ul.style.webkitTransform = "translate3d(0," + -h*i + "px,0)";
			loopLi[i].removeAttribute("class");
			loopLi[i+1].className = "current";
			//console.log(i)
			//末尾第二个元素
			if(i == (len-3)){
				i = 0;
				setTimeout(function(){
					ul.style.transition = "0s";
					ul.style.webkitTransform = "translate3d(0,0,0)";
					loopLi[len-2].removeAttribute("class")
				},500)
				loopLi[1].className = "current";
			}
		}
 	}
})(Zepto);   
</script>
</html>